<template>
  <n-form
    ref="loginFormRef"
    :model="loginForm"
    :rules="loginFormRules"
    :style="{ width: '450px' }"
    :show-label="false"
  >
    <n-form-item path="username">
      <n-input
        v-model:value="loginForm.username"
        placeholder="请输入账号(邮箱号)"
        :round="true"
        :clearable="true"
      ></n-input>
    </n-form-item>
    <n-form-item path="password">
      <n-input
        v-model:value="loginForm.password"
        type="password"
        show-password-on="mousedown"
        placeholder="请输入密码"
        :round="true"
        :clearable="true"
      ></n-input>
    </n-form-item>
    <n-space justify="space-between">
      <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
      <n-button :text="true" color="#ffffff" @click="forgetPwd">
        忘记密码？
      </n-button>
    </n-space>
    <n-button
      @click="handleSubmit"
      :loading="authStore.loginLoading"
      :disabled="authStore.loginLoading"
      class="login-btn"
      type="info"
      :round="true"
    >
      登&nbsp;&nbsp;录
    </n-button>
  </n-form>
</template>

<script lang="ts" setup>
import { FormItemRule } from "naive-ui";
import { LoginInfo, useAuthStore } from "@/store/modules/auth";

// 登录表单
const loginFormRef = ref();
const loginForm = reactive({
  username: "",
  password: "",
} as LoginInfo);

// 记住我
const rememberMe = ref(false);

// 账号校验
const accountValidator = (rule: FormItemRule, value: string) => {
  const re = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  if (!value) {
    return new Error("账号不能为空!");
  } else if (!re.test(value) && value !== "root" && value !== "administrator") {
    return new Error("请输入正确的邮箱!");
  }
  return true;
};

// 登录表单校验规则
const loginFormRules = {
  username: [
    {
      required: true,
      validator: accountValidator,
      trigger: "blur",
    },
  ],
  password: {
    required: true,
    message: "密码不能为空!",
    trigger: "blur",
  },
};

// 忘记密码弹窗提示
const forgetPwd = () => {
  console.log("forget pwd");

  const $dialog = window.$dialog;
  $dialog?.info({
    title: "忘记密码",
    content: "请联系管理员重置密码!",
    positiveText: "确定",
    maskClosable: false,
  });
};

const authStore = useAuthStore();
const message = useMessage();
const router = useRouter();

// 点击登录触发的事件
const handleSubmit = (e: MouseEvent) => {
  // 如loginFormRef无值
  if (!loginFormRef.value) return;
  e.preventDefault();

  // 提交前进行数据校验
  loginFormRef.value.validate(async (err: boolean) => {
    if (!err) {
      const { username, password } = loginForm;

      const params: LoginInfo = {
        username,
        password,
      };
      try {
        await authStore.login(params);
        message.success("登录成功!");
        await router.replace("/");
      } catch (e) {
        console.log(e);
      }
    } else {
      const $message = window.$message;
      $message?.warning("未正确填写账号或密码!");
    }
  });
};
</script>

<style scoped>
.login-btn {
  margin-top: 25px;
  width: 100%;
}
</style>

<style>
.n-checkbox .n-checkbox__label {
  color: #ffffff !important;
}
</style>
